<template>
    <view class="container">
        <header>
            <view class="navbar navbar-inverse navbar-fixed-top">
                <view class="container">
                    <view class="navbar-header">
                        <!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"></button>-->
                    </view>
                </view>
            </view>
        </header>

        <view class="page-header"></view>

        <view class="col-md-5">
            <label class="control-label" for="name">Name</label>
            <view class="row">
                <view class="col-md-5">
                    <input id="name" name="name" class="form-control" type="text" @keydown.enter="register" />
                </view>
                <view class="col-md-7 text-right">
                    <button id="register" class="btn btn-primary" @click="register">
                        <span class="glyphicon glyphicon-plus"></span> 注册
                    </button>
                </view>
            </view>

            <br />
            <label class="control-label" for="chat_input">输入：</label>
            <view class="chat_input">
                <input type="text" id="chat_input" />
                <button id="send_msg" class="btn btn-primary" @click="send_chat">
                    <span class="glyphicon glyphicon-plus"></span> 发送消息
                </button>
            </view>
        </view>

        <br />

        <view class="row">
            <view class="col-md-5">
                <view class="row">
                    <view class="col-md-12">
                        <button id="presenter" class="btn btn-success" @click="startLive">
                            <span class="glyphicon glyphicon-play"></span> 开始直播
                        </button>
                        <button id="stop" class="btn btn-danger" @click="stopLive">
                            <span class="glyphicon glyphicon-stop"></span> 停止直播
                        </button>
                    </view>
                </view>
                <br />
                <label class="control-label" for="console">Console</label><br />
                <br />
                <view id="console" class="democonsole">
                    <ul>
                        <li v-for="(log, index) in logs" :key="index">{{ log }}</li>
                    </ul>
                </view>
            </view>
            <view class="col-md-7">
                <view id="videoBig">
                    <video id="video" autoplay width="640px" height="480px" poster="/static/img/webrtc.png"></video>
                </view>
            </view>
        </view>

        <footer>
            <view class="foot-fixed-bottom"></view>
        </footer>
    </view>
</template>

<script>
export default {
    data() {
        return {
            logs: []
        };
    },
    methods: {
        register() {
            // 注册逻辑
            this.logs.push('注册按钮被点击');
        },
        send_chat() {
            // 发送消息逻辑
            this.logs.push('发送消息按钮被点击');
        },
        startLive() {
            // 开始直播逻辑
            this.logs.push('开始直播按钮被点击');
        },
        stopLive() {
            // 停止直播逻辑
            this.logs.push('停止直播按钮被点击');
        }
    }
};
</script>

<style>
.container {
    padding: 20px;
}

.navbar-inverse {
    background-color: #333;
    color: white;
}

.form-control {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-primary {
    background-color: #007BFF;
    color: white;
}

.btn-success {
    background-color: #28a745;
    color: white;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}

.democonsole {
    background-color: #f8f9fa;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 200px;
    overflow-y: auto;
}

#videoBig {
    text-align: center;
}

video {
    max-width: 100%;
    height: auto;
}
</style>